<template>
  <RegionSelect v-model="areaCodeList" v-bind="Props" v-on="$listeners" />
</template>
<script>
import RegionSelect from 'region-select'
import { mapGetters } from 'vuex'
export default {
  name: 'AllRegionSelect',
  components: {
    RegionSelect
  },
  props: ['value'],
  computed: {
    Props () {
      return this.$lo.merge(this.defaultProps, this.$attrs)
    },
    ...mapGetters(['allAreaTree'])
  },
  data () {
    return {
      areaCodeList: [],
      defaultProps: {
        props: {
          value: 'id'
        }
      }
    }
  },
  watch: {
    allAreaTree: {
      immediate: true,
      handler (n, o) {
        this.defaultProps.data = n
      }
    },
    value: {
      immediate: true,
      handler (n, o) {
        if (n == o) {
          return
        }

        if (n?.length > 0 || Array.isArray(n) || typeof n === 'string') {
          this.areaCodeList = n
        } else {
          this.areaCodeList = this.Props.props.multiple ? [] : ''
        }
      }
    },
    areaCodeList (n) {
      this.$emit('input', n)
      this.$parent.$nextTick(() => {
        this.$parent.$emit('el.form.blur', n) // 触发父组件表单校验
      })
    }
  }
}
</script>
